import React, { lazy, memo, Suspense } from 'react'
import { useRoutes } from 'react-router-dom'

import Discover from '@/pages/Discover'
import Recommend from '@/pages/Discover/children/Recommend'

const Friends = lazy(() => import('@/pages/Friends'))
const User = lazy(() => import('@/pages/User'))
const Songs = lazy(() => import('../pages/Discover/children/Songs'))
const Album = lazy(() => import('../pages/Discover/children/Album'))
const Artist = lazy(() => import('../pages/Discover/children/Artist'))
const Djradio = lazy(() => import('../pages/Discover/children/Djradio'))
const Ranking = lazy(() => import('../pages/Discover/children/Ranking'))

export default memo(function Router() {
  // 解决路由懒加载屏幕闪烁
  const lazyLoad = indexCom => {
    return <Suspense fallback={<div>loading</div>}>{indexCom}</Suspense>
  }
  const routes = [
    {
      path: '/',
      element: <Discover />,
      children: [
        {
          index: true,
          element: <Recommend />
        }
      ]
    },
    {
      path: '/discover',
      element: <Discover />,
      children: [
        {
          index: true,
          element: <Recommend />
        },
        {
          path: 'recommend',
          element: <Recommend />
        },
        {
          path: 'ranking',
          element: lazyLoad(<Ranking />)
        },
        {
          path: 'songs',
          element: lazyLoad(<Songs />)
        },
        {
          path: 'djradio',
          element: lazyLoad(<Djradio />)
        },
        {
          path: 'artist',
          element: lazyLoad(<Artist />)
        },
        {
          path: 'album',
          element: lazyLoad(<Album />)
        }
      ]
    },
    {
      path: 'friend',
      element: lazyLoad(<Friends />)
    },
    { path: 'mine', element: lazyLoad(<User />) }
  ]
  return useRoutes(routes)
  // <Routes>
  //   <Route path='/' element={<Discover />}>
  //     <Route index element={<Recommend />} />
  //   </Route>
  //   <Route path='/discover' element={<Discover />}>
  //     <Route index element={<Recommend />} />
  //     <Route path='recommend' element={<Recommend />} />
  //     <Route
  //       path='ranking'
  //       element={lazy(() => import('@/pages/Discover/children/Ranking'))}
  //     />
  //     <Route
  //       path='songs'
  //       element={lazy(() => import('@/pages/Discover/children/Songs'))}
  //     />
  //     <Route path='djradio' element={<Djradio />} />
  //     <Route path='atrist' element={<Artist />} />
  //     <Route path='album' element={<Album />} />
  //     <Route path='player' element={<Player />} />
  //   </Route>
  //   <Route path='/fiends' element={<Friends />} />
  //   <Route path='/user' element={<User />} />
  // </Routes>

  // return useRoutes([
  //   {
  //     path: '/',
  //     element: <Layout />,
  //     children: [
  //       {
  //         index: true,
  //         path: '/discover',
  //         element: <Discover />,
  //       },
  //     ],
  //   },
  //   {
  //     path: '/discover',
  //     element: <Discover />,
  //     children: [
  //       {
  //         index: true,
  //         element: <Recommend />,
  //       },
  //     ],
  //   },
  // ])
})
